<template>
  <div class="menu-icon-list">
    <div class="icon-list">
      <div class="icon-line"
           v-for="(listChild,index) of handleSizeList"
           :key="index">
        <!-- 本地图标 -->
        <div v-for="(icon,index2) of listChild"
             :key="index2">
          <div class="column"
               v-if="icon !=''"
               @click="choseIcon(icon)">
            <div :class="{'chosedIcon':icon == iconData}">
              <a-icon :type="icon.value" />
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import iconList from './menuIcon'
import { icons } from '../menuIcon'
import { storage } from '@zh/common-utils/http'
import PropTypes from '@zh/common-utils/prop-types'
const cloneDeep = require('clone')

export default {
  name: 'MenuIconList',
  model: {
    event: 'model'
  },
  extends: null,
  mixins: [],
  components: {},
  props: {
    value: PropTypes.string.def(''),
    // 是否允许上传图片
    hideUploadIcon: PropTypes.bool.def(false),
    // 每行显示图标数
    size: PropTypes.number.def(8)
  },
  data () {
    return {
      storage,
      // 是否隐藏上传图标
      hidden: true,
      iconData: '',
      // 图标列表
      iconList: Object.keys(icons) > 0 ? icons : iconList
    }
  },
  computed: {
    // 根据size 分组
    handleSizeList () {
      const list = []
      let listChild = []
      for (let i = 0; i < this.iconList.length; i++) {
        // 将数据添加在子集内
        listChild.push(this.iconList[i])
        // 如果是该分组的时候了
        if ((i + 1) % this.size == 0) {
          // 将这一组的存进去
          list.push(Object.assign([], listChild))
          // 清空子集
          listChild = []
        }
        // 如果不能整除并且在最后一个了
        if (this.iconList.length % this.size != 0 && i == this.iconList.length - 1) {
          // 将这最后一组的存进去
          list.push(Object.assign([], listChild))
        }
      }
      return list
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (value) {
        // this.iconData = cloneDeep(value)
        this.iconData = value
      }
    }
  },
  created () { },
  mounted () { },
  methods: {
    // 更改选择图标事件
    choseIcon (icon) {
      this.iconData = icon.value
      this.propValue()
    },
    // 上传菜单图标
    uploadIcon (info) {
      if (info.file.status === 'done') {
        this.iconData = info.file.response.data.key
        this.propValue()
      }
    },
    /** 上传数据 */
    propValue () {
      this.$emit('model', this.iconData)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-upload.ant-upload-select-picture-card {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
}
.icon-list {
  max-height: 200px;
  overflow: hidden;
  overflow-y: auto;
}
.icon-list .icon-line {
  display: flex;
}
.icon-list .column {
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.icon-list .column > div {
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #dcdfe6;
  margin: auto;
  border-radius: 10%;
}
.icon-list .column > div i {
  font-size: var(--font-size-20);
}
.icon-list .column :hover {
  color: #f5f7fa !important;
  background-color: #1890ff !important;
  cursor: pointer;
}
.chosedIcon {
  color: #f5f7fa !important;
  background-color: #1890ff !important;
}
</style>